<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>path</title>
</head>
<style>
  .spa {
    display: inline-block;
    width: 6px;
    height: 6px;
    line-height: 7px;
    background-color: gray;
    border-bottom: solid 1px white;
    border-right: solid 1px white;
    vertical-align: top;


  }

  #container {
    width: 701px;
    font-size: 0;
  }
</style>

<body>
  <div id="container"></div>
  <button onclick="localStorage['map']=JSON.stringify(map)">save</button>
</body>
<script>
  let map = localStorage['map'] ? JSON.parse(localStorage['map']) : Array(10000).fill(0);


  let container = document.getElementById('container');
  container.cell = ''
  for (let y = 0; y < 100; y++) {
    for (let x = 0; x < 100; x++) {
      let cell = document.createElement('div');
      cell.classList.add('spa');
      if (map[100 * y + x] == 1)
        cell.style.backgroundColor = 'black';
      cell.addEventListener('mousemove', () => {
        if (mousedown) {
          if (clear) {
            cell.style.backgroundColor = ''
            map[100 * y + x] = 0;
          }
        } else {
          cell.style.backgroundColor = 'black'
          map[100 * y + x] = 1;
        }
      })
      container.appendChild(cell)
    }

  }
  let mousedown = false;
  let clear = false;
  document.addEventListener('mousedown', e => {
    mousedown = true;
    clear = (e.which === 3)
  })
  document.addEventListener('mouseup', () => {
    mousedown = false;
  })
  document.addEventListener('contentmenu', e => e.preventDefault())

  function sleep(t) {
    return new Promise(function (resolve, reject) {
      setTimeout(resolve, t)
    })
  }

  async function path(map, start, end) {
    var queue = [start];

   async function install(x, y) {
      if (x < 0 || x >= 100 || y < 0 || y >= 100) {
        return;
      }
      if (map[y * 100 + x]) {
        return
      }
      await sleep(1)
      container.children[y*100+x].style.backgroundColor='green';
      map[y * 100 + x] = 2;
      queue.push([x, y])

    }

    while (queue.length) {
      let [x, y] = queue.shift();
      // console.log(x, y)

      if (x === end[0] && y === end[1]) {
        return true
      }
      await install(x - 1, y);
      await install(x + 1, y);
      await install(x, y - 1);
      await install(x, y + 1);
    }

  }
</script>

</html>